<template>
	<up-popup customStyle="max-height:980rpx;border-radius:40rpx 40rpx 0 0;" :show="experienceShow" mode="bottom" @open="popupOpen" @close="popupClose"
		closeable>
		<view class="popup-content">
			<view class="popup-content-title">
				<view class="title">
					{{data.title}}
				</view>
				<view class="sub-title" v-if="data.subTitle">
					{{data.subTitle}}
				</view>
			</view>
			<view class="popup-content-list">
				<view
					:class="['popup-content-list-item','align-justify-center',{'active':conditionListItem.some(type=>type.key == item.key)}]"
					:key="index" v-for="(item,index) in data.arr" @click="toggleCondition(item)">
					{{item.val}}
				</view>
			</view>
			<view class="align-justify-center popup-content-btn"
				@click="conditionSure">
				提交
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref,reactive,watch } from 'vue'
	
	const {multiple,data,experienceShow} = defineProps({
		experienceShow: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default: {}
		},
		multiple:{
			type:Boolean,
			dedfault:true
		}
	})
	
	const emit = defineEmits(['popupClose','conditionSure'])
	
	const conditionListItem = ref([])
	
	const popupOpen = () => {
		
	}
	
	const toggleCondition = (item) => {
		if(multiple){
			if(conditionListItem.value.some(type=> type.key == item.key)){
				conditionListItem.value = conditionListItem.value.filter(type => type.key != item.key)
			}else{
				conditionListItem.value.push(item)
			}
		}else{
			if(!conditionListItem.value.some(type=> type.key ==item.key)){
				conditionListItem.value = []
				conditionListItem.value.push(item)
			}
		}
	}
	
	const popupClose = () => {
		emit('popupClose', false)
		conditionListItem.value = []
	}
	
	const conditionSure = () => {
		emit('conditionSure',conditionListItem.value)
		popupClose()
	}
</script>

<style lang="scss">
	.popup-content {
		padding: 60rpx;
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: border-box;

		&-title {
			text-align: center;

			.title {
				font-weight: 500;
				font-size: 34rpx;
				color: #222222;
			}

			.sub-title {
				margin-top: 16rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
			}
		}

		&-list {
			overflow-y: auto;
			width: 630rpx;
			height: 508rpx;
			margin: 60rpx 0 60rpx;

			&-item {
				height: 96rpx;
				margin-bottom: 40rpx;
				background-color: #FFFFFF;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				border: 2rpx solid #444444;
				font-size: 30rpx;

				&.active {
					background-color: rgba(255, 71, 171, 0.2);
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					border: 2rpx solid #FF47AB;
					font-size: 30rpx;
					color: #FF47AB;
				}
			}
			
		}
		
		&-btn {
			position: relative;
			width: 630rpx;
			height: 96rpx;
			border: 2rpx solid #444444;
			background-color: #FF47AB;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			border-color: transparent;
			box-shadow: 0 -70rpx 20rpx 0 rgba(255,255,255,.8);
			// box-shadow: 0 -40rpx 20rpx 0 rgba(0,0,0,.8);
		}
	}
</style>